import React, { Component } from 'react';
import { TextInput, ScrollView, View, Image, StatusBar, Text, TouchableOpacity, FlatList, RefreshControl, DeviceEventEmitter } from 'react-native';
import TabBarTitle from '../components/TabBarTitle';
import { TabBarImage, TabBarAnimationImage } from '../components/TabBarImage';
import Colors from '../constants/Colors';
import { statusBarHeight, titleHeight, width, unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import { SubmitButton8, AddButton, ReduceButton, SubmitButton9, SubmitButton10, SubmitButton4, SubmitButton13, SubmitButton1 } from '../components/Button';
import { api_member_cart_get_list, api_order_workorder_serviceAssess } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import MyListView from '../components/MyListView';
import { DeleteTextView } from '../components/MyTextView';
import { CommonModal2, BottomPayModal, CommonModal3, BottomReasonModal, EvaluateTipsModal } from '../components/Modal';
import { MeItem, IconItem, OrderDetailHeaderItem, Item3, RatingItem } from '../components/Item';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import CommonUtil from '../constants/CommonUtil';
import { Rating, AirbnbRating } from 'react-native-elements';
import { show } from '../constants/Toast';

export default class EvaluateEmployerScreen extends Component {
    constructor(props) {
        super(props)
        this.no = this.props.navigation.getParam('no', '0')
        this.state = {
            content: '',
            currentChoose: 1,
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {

        })
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF7 }}>
                <MyHeader title='评价雇主' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{}}>
                    <View style={{ width: width, height: 85 * unitWidth, backgroundColor: Colors.white, paddingHorizontal: 15 * unitWidth }}>
                        <Text style={{ color: Colors.black, fontSize: 15, marginVertical: 10 * unitWidth }}>给雇主评价</Text>
                        <View style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch', marginTop: 10 * unitWidth }}>
                            <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', flex: 1, marginLeft: 20 * unitWidth }} onPress={() => { this.setState({ currentChoose: 1 }) }}>
                                <Image style={{ width: 10 * unitWidth, height: 10 * unitWidth }}
                                    source={this.state.currentChoose == 1 ? require('../res/pj_yd2.png') : require('../res/pj_yd1.png')} resizeMode='stretch' />
                                <Text style={{ marginLeft: 5 * unitWidth, color: Colors.color99, fontSize: 13 }}>好评</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', flex: 1, marginLeft: 20 * unitWidth }} onPress={() => { this.setState({ currentChoose: 2 }) }}>
                                <Image style={{ width: 10 * unitWidth, height: 10 * unitWidth }}
                                    source={this.state.currentChoose == 2 ? require('../res/pj_yd2.png') : require('../res/pj_yd1.png')} resizeMode='stretch' />
                                <Text style={{ marginLeft: 5 * unitWidth, color: Colors.color99, fontSize: 13 }}>中评</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', flex: 1, marginLeft: 20 * unitWidth }} onPress={() => { this.setState({ currentChoose: 3 }) }}>
                                <Image style={{ width: 10 * unitWidth, height: 10 * unitWidth }}
                                    source={this.state.currentChoose == 3 ? require('../res/pj_yd2.png') : require('../res/pj_yd1.png')} resizeMode='stretch' />
                                <Text style={{ marginLeft: 5 * unitWidth, color: Colors.color99, fontSize: 13 }}>差评</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={{ width: width, minHeight: 226 * unitWidth, backgroundColor: Colors.white, paddingHorizontal: 15 * unitWidth, marginTop: 5 * unitWidth }}>
                        <Text style={{ color: Colors.black, fontSize: 15, marginVertical: 10 * unitWidth }}>更多评价</Text>
                        <View style={{ width: 335 * unitWidth, minHeight: 155 * unitWidth, backgroundColor: Colors.colorEF, paddingHorizontal: 10 * unitWidth }}>
                            <TextInput
                                style={{
                                    fontSize: 14,
                                    textAlign: 'left'
                                }}
                                onChangeText={(text) => {
                                    this.setState({
                                        content: text
                                    })
                                }}
                                multiline={true}
                                maxLength={800}
                                placeholder='请输入您对服务商的评价吧...'
                                value={this.state.content}
                            />
                        </View>
                    </View>
                    <SubmitButton1 style={{ alignSelf: 'center', marginTop: 100 * unitWidth }} text='提交' onPress={() => {
                        this.submit();
                    }} />
                </ScrollView>
                <EvaluateTipsModal ref='EvaluateTipsModal' btnText='确定' title='恭喜您评价成功'
                    onClosePress={() => {
                        this.props.navigation.pop();
                    }}
                    onPress={() => {
                        this.refs.EvaluateTipsModal.hideModal();
                        this.props.navigation.pop();
                    }} />
            </View>
        )
    }

    submit() {
        let params = {
            out_trade_no: this.no,
            score: this.state.currentChoose == '1' ? '3' : this.state.currentChoose == '3' ? '1' : '2',
            content: this.state.content,
        }
        postFetch(api_order_workorder_serviceAssess, params, {
            success: (response) => {
                this.refs.EvaluateTipsModal.showModal();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}